<template>
  <div style="width: 100%">
    <span class="video-box">
      <span
        v-if="videoName"
        class="cc-video-name"
        :title="videoName"
        @click="showVideo"
      >{{videoName}}</span>
    </span>

    <el-dialog
      width="800px"
      append-to-body
      title="视频查看"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :fullscreen="dialogFullscreen"
      destroy-on-close
      draggable
      class="cc-page-comp-dialog"
    >
      <template #header>
        <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
          <div class="title">视频查看</div>
          <div class="button">
            <cc-icon
              v-if="!dialogFullscreen"
              iconId="018dca8cad1b28075ecd"
              @click="dialogFullscreen=true"
              title="最大化"
            />
            <cc-icon
              v-if="dialogFullscreen"
              iconId="018dca8cad1b9b03c47f"
              @click="dialogFullscreen=false"
              title="缩小"
            />
          </div>
        </div>
      </template>
      <video width="100%" height="100%" controls autoplay>
        <source :src="videoUrl" type="video/mp4">
        浏览器不支持视频查看
      </video>
      <template #footer>
        <el-form>
          <el-button
            size="default"
            type="info"
            @click="dialogVisible=false"
          >关闭</el-button>
        </el-form>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import api from "@/http/api";

const props = defineProps({
  videoId: {
    type: String,
    default: ''
  }
});

const loading = ref(true);
const fileId = ref('');
const videoName = ref('');
const videoUrl = ref('');
const dialogFullscreen = ref(false);
const dialogVisible = ref(false);

const loadData = (videoId) => {
  if (videoId) {
    loading.value = true;
    fileId.value = videoId;
    api.queryFile(videoId).then(res => {
      loading.value = false;
      videoName.value = res.data.trueName;
      videoUrl.value = import.meta.env.VITE_VIDEO_PATH + res.data.id;
    }).catch(() => {
      loading.value = false;
    });
  } else {
    loading.value = false;
    fileId.value = '';
    videoName.value = '';
    videoUrl.value = '';
  }
};

const showVideo = () => {
  dialogVisible.value = true;
};

watch(() => props.videoId, (newVal) => {
  if ((newVal || '') === '' || (fileId.value || '') === '' || newVal !== fileId.value) {
    fileId.value = '';
    videoName.value = '';
    videoUrl.value = '';
    loadData(newVal);
  }
});

onMounted(() => {
  loadData(props.videoId);
});
</script>

<style scoped>
.video-box {
  display: flex;
  justify-content: start;
  align-items: center;
  text-align: center;
}
.cc-video-name {
  cursor: pointer;
  flex-grow: 1;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-wrap: wrap;
  white-space: nowrap;
}
</style>